<!--
 * relative     : \src\components\transitionRouterView.vue
 * Author       : 郭鹏超
 * Date         : 2024-09-06 09:33
 * LastEditors  : 郭鹏超
 * LastEditTime : 2025-03-06 20:50
 * Description  : 路由组件
 * CodeIterationRecord: 
 -->
<template>
  <router-view v-slot="{ Component, route }">
    <transition name="fade-slide" mode="out-in">
      <template v-if="sessionStore.isRouterAlive">
        <keep-alive v-if="route.meta.keepAlive">
          <component :is="Component" :key="key" />
        </keep-alive>
        <component v-else :is="Component" :key="key" />
      </template>
    </transition>
  </router-view>
</template>

<script lang="ts" setup>
const { sessionStore } = useStore();

/**
 * 组件渲染标识键
 * @type {Model<number | string>}
 * @default undefined
 * 用于强制重新渲染组件，当路由参数变化但组件相同时，通过改变key触发更新
 */
const key = defineModel<number | string>({
  default: undefined
});
</script>
